<template>
  <el-tabs type="border-card">
    <el-tab-pane label="备份列表" class="main-h-center">
      <vue-loading v-show="!isLoaded"></vue-loading>
      <div v-show="isLoaded" style="width: 100%">
        <Table :request-data="requestData" v-on:list="listHander" ref="table">
          <template slot="search-box">
            <el-form-item label="数据管理" style="font-weight: bold;"></el-form-item>
          </template>
          <template slot="table-box">
            <el-table :data="tableData" stripe>
              <el-table-column label="生成日期" width="200">
                <template slot-scope="scope">
                  <span>{{ $utils.formatDateTime(scope.row.addTime)}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="fileName" label="文件名称"></el-table-column>
              <el-table-column label="文件大小" width="200">
                <template slot-scope="scope">
                  <span>{{$utils.parseFloat(scope.row.size/1024/1024)}} MB</span>
                </template>
              </el-table-column>
              <el-table-column fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    icon="el-icon-download"
                    type="primary"
                    round
                    @click="handleDown(scope.row.fileName,scope.$index)"
                  >下载</el-button>
                  <el-button
                    size="mini"
                    icon="el-icon-delete"
                    type="danger"
                    round
                    @click="handleRemove(scope.row.fileName,scope.$index)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </Table>
      </div>
    </el-tab-pane>
    <el-tab-pane label="备份设置" class="main-h-center">
      <div style="width:460px">
        <el-form label-width="100px">
          <el-form-item label="备份目录">
            <el-input v-model="set.backupPath" disabled></el-input>
          </el-form-item>
          <el-form-item label="备份邮箱">
            <el-input v-model="set.addressee"></el-input>
          </el-form-item>
          <el-form-item label="备份时间">
            <el-time-select
              style="width:100%"
              v-model="set.backupTime"
              :picker-options="{
                    start: '00:30',
                    step: '00:30',
                    end: '23:30'
                  }"
              placeholder="选择备份时间点"
            ></el-time-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleUpdate">保存修改</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import Table from "@/components/Table.vue";
export default {
  components: {
    Table
  },
  data() {
    return {
      isLoaded: false,
      requestData: {
        urlPath: "/set/dblist",
        postData: {
          pageNum: 1,
          pageSize: 20
        }
      },
      tableData: [],
      set: {
        addressee: "",
        backupTime: "",
        backupPath: ""
      }
    };
  },
  methods: {
    listHander(e) {
      this.tableData = e;
      this.isLoaded = true;
    },
     handleDown(fileName, index) {
      this.$http({
        method:"post",
        url:"/set/downdb",
        data:{ fileName: fileName },
        responseType:"blob",
      })
      .then((res)=>{
        const content = res
            const blob = new Blob([content])
            if ('download' in document.createElement('a')) { // 非IE下载
              const elink = document.createElement('a')
              elink.download = fileName
              elink.style.display = 'none'
              elink.href = URL.createObjectURL(blob)
              document.body.appendChild(elink)
              elink.click()
              URL.revokeObjectURL(elink.href) // 释放URL 对象
              document.body.removeChild(elink)
            } else { // IE10+下载
              navigator.msSaveBlob(blob, fileName)
            }
      })
    },
    async handleRemove(fileName, index) {
      await this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      });
      let res = await this.$http.post("/set/removedb", { fileName: fileName });
      if (res.status) {
        this.tableData.splice(index, 1);
        this.$message({
          showClose: true,
          message: res.text,
          type: "success"
        });
      } else {
        this.$message.error(res.text);
      }
    },
    handleUpdate() {
      this.$http.post("/set/update?action=backupset", this.set).then(res => {
        if (res.status) {
          this.$message({
            showClose: true,
            message: res.text,
            type: "success"
          });
        } else {
          this.$message.error(res.text);
        }
      });
    }
  },
  created() {
    this.$http.post("/set/find?action=backupset", {}).then(res => {
      if (res.data != null) {
        this.set = res.data;
      } else {
        this.$message.error("数据获取失败！");
      }
    });
  },
  computed: {}
};
</script>
<style scoped>
.head-text {
  float: right;
  color: #99a9bf;
}
</style>


